<template>
  <div>

    <el-row style="margin-top: 50px">
      <el-col :span="12">
        <div style="border-right: 1px dashed black;width: 100%;height: 200px">
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:5000/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <el-image v-if="imageUrl" :src="imageUrl" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

          <el-descriptions title="进入车辆信息列表" :column="1" direction="horizontal" style="margin-top: 77px" border>
            <el-descriptions-item label="车牌号">
              <span style="color: mediumblue">{{carLicenseId1}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="车辆类型">
              <span style="color: mediumblue">{{interior1}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="当前时间">
              <span style="color: mediumblue">{{dateTime1}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="备注">
              <span style="color: mediumblue">{{KK}}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>

      <el-col :span="12">
        <div>
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:5000/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess2"
            :before-upload="beforeAvatarUpload">
            <el-image v-if="imageUrl2" :src="imageUrl2" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

          <el-descriptions class="margin-top" title="离开车辆信息列表" :column="1" direction="horizontal" style="margin-top: 77px" border>
            <el-descriptions-item label="车牌号">
              <span style="color: mediumblue">{{carLicenseId2}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="车辆类型">
              <span style="color: mediumblue">{{interior2}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="当前时间">
              <span style="color: mediumblue">{{dateTime2}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="费用">
              <span style="color: mediumblue">{{expense}}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>
    </el-row>

  </div>


</template>

<script type="text/ecmascript-6">
export default {
  name: 'CarRecognition',
  data() {
    return {
      imageUrl: '',
      imageUrl2: '',
      carLicenseId1: '',
      carLicenseId2: '',
      dateTime1: '',
      dateTime2: '',
      interior1: '',
      interior2: '',
      expense: '',
      KK:''
    };
  },
  methods: {
    getDateTime() {
      const year = new Date().getFullYear();
      const month = new Date().getMonth() + 1;
      const day = new Date().getDate();
      const h = new Date().getHours();
      const m = new Date().getMinutes();
      const s = new Date().getSeconds();
      const dateTime = year + "-" + month + "-" + day + " " + h + ":" + m + ":" + s;
      return  dateTime;
    },
    // 进入时得数据监听
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.carLicenseId1 = res;
      this.dateTime1 = this.getDateTime();
      //console.log(res);
      this.KK = '无';
      this.$axios({
        url:"/record/enter",
        params: {carLicenseId: this.carLicenseId1}
      }).then(res=>{
        if(res.data === true){
          this.interior1 = "业内车辆";
        } else {
          this.interior1 = "外来车辆";
        }
      })
    },
    // 离开时的数据监听
    handleAvatarSuccess2(res, file) {
      this.imageUrl2 = URL.createObjectURL(file.raw);
      this.carLicenseId2 = res;
      this.dateTime2 = this.getDateTime();
      this.$axios({
        url:"/record/leave",
        params:{carLicenseId: this.carLicenseId2}
      }).then(res=>{
        //console.log(res.data);
        if(res.data.interior === false){
          this.interior2 = "外来车辆";
        } else {
          this.interior2 = "内部车辆";
        }
        this.expense = res.data.expense + ".00元";
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },
  mounted() {

  }
}
</script>

<style>
.avatar-uploader .el-upload {
  width: 150px;
  height: 200px;
  border: 5px solid #fcfcbc;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #4954f7;
}

.avatar-uploader-icon {
  font-size: 30px;
  color: #8c939d;
  width: 150px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 100%;
}

</style>

